
import React,{Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    ImageBackground,
    TouchableOpacity,
    Image,
    Platform
} from 'react-native';
import {getMonthDate} from "../../Utils/getMonthDate";
import {BaseStyle,demension} from '../../Style/BaseStyle.js';
import Calender from '../../Components/Calender.js'
import {navigationSecond,headerRights} from "../../Utils/NavigatorCommon";

export default class Signed extends Component
{
    static navigationOptions = ((props)=>{
        return{
            ...navigationSecond,
            headerRight:headerRights(()=>{
                console.warn(props)
            },"message")
        }
    })
    constructor(props) {
        super(props);
        this.state={
            paused:false
        }
    }

    render(){
        const navigator=this.props.navigation.navigate,vm=this;

        return(
            <ScrollView style={BaseStyle.container} showsVerticalScrollIndicator={false}>
                <View>

                    <ImageBackground style={styles.imageWidth} source={require('./images/signedBg.png')}>
                        <TouchableOpacity style={styles.circleStyle}>
                            <Image source={require('./images/pencil.png')} style={styles.circleImage}/>
                            <Text style={styles.signed}>立即签到</Text>
                        </TouchableOpacity>
                    </ImageBackground>
                    <TouchableOpacity onPress={
                        ()=>this.showCalender()
                    }>
                        <Text>点击</Text>
                    </TouchableOpacity>

                    <Calender
                        ref="RNCalendar_CL"
                        dateChanged={(date) => this.dateChanged(date)}
                    />
                </View>
            </ScrollView>
        )
    }
    showCalender(){
        this.refs.RNCalendar_CL.showModal();
    }

    dateChanged(date){
        console.warn(date)
    }
}

const styles=StyleSheet.create({
    imageWidth:{
        width:demension.width,
        height:205,
        ...BaseStyle.flexCenter
    },
    circleStyle:{
        ...BaseStyle.flexColumnCenter,
        width:BaseStyle.w100.width,
        height:BaseStyle.w100.width,
        backgroundColor:BaseStyle.container.backgroundColor,
        borderRadius:BaseStyle.w100.width,
        borderWidth:10,
        borderStyle:"solid",
        borderColor:'rgba(255,255,255,.5)'
    },
    circleImage:{
        width:BaseStyle.w100.width*.34,
        height:BaseStyle.w100.width*.34
    },
    signed:{
        marginTop:5,
        color:BaseStyle.titleColor.backgroundColor,
        fontSize:14
    }

})
